<template>
	<v-container>
			
	<div class="text-center ma-2">
    <v-snackbar
      v-model="snackbar.isOpen"
      top
    >
      {{ snackbar.text }}
      <v-btn
        color="pink"
        text
        @click="snackbar.isOpen = false"
      >
        X
      </v-btn>
    </v-snackbar>
  	</div>
	<v-form>
		<div class="headline text-center">{{ msg }}</div>
		<div class="body-2  text-center">
			绑定手机号码
		</div>
    <v-container>
    <v-row>
        <v-col cols="12" sm="6" md="3">
            <v-row no-gutters>
                <v-col cols="3">
                    <v-select
                        :items="itacs"
                        value = "+86"
                        v-model="itac"
                        outlined
                    ></v-select>
                </v-col>
                <v-col cols="9">
                    <v-text-field
                        label="手机号码"
                        v-model="phone"
                        outlined
                    ></v-text-field>
                </v-col>
            </v-row>
                    <v-text-field
                        v-model="code"
                        outlined
                        type="Number"
                        label="验证码"
                    >
                        <template v-slot:append>
                            <v-fade-transition leave-absolute>                    
                            </v-fade-transition>
                        </template>
                        <template v-slot:append-outer>
                            <v-menu
                                style="top: -12px"
                                offset-y
                            >
                                <template v-slot:activator="{ on }">
                                <v-btn  v-on="on" @click="bindCode" :loading="authcode">
                                    <span v-show="sendAuthCode" > 获取验证码 </span>
                                    <span v-show="!sendAuthCode"> {{auth_time}}秒重新获取 </span>
                                </v-btn>
                                </template>
                            </v-menu>
                        </template>
                    </v-text-field>
				</v-col>
                <v-col cols="12" sm="6" md="1">
                    <div class="body-2  text-left">
                        使用利佳健康服务，您需要了解我们的<router-link class="link" to="/home">隐私政策</router-link>
                    </div>
                </v-col>
                <v-col class="" cols="12">
                    <v-btn width="100%" @click="bindPhone" color="success">绑定</v-btn>
                </v-col>
			
    </v-row>
    </v-container>
  </v-form>
	</v-container>
</template>

<script>
import { OauthBindCode, OauthBindPhone,UseCodeToToken,URLP } from './../api/api';
export default {
	data: () => ({
		phone:'',
        password:'',
        password2:'',
        code:'',
        itac:'+86',
		itacs: ['+86', '+852'],
		snackbar: {
			isOpen:false,
			text:'',
        },
        sendAuthCode:true,/*布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
        auth_time: 0, /*倒计时 计数器*/
        authcode:false,
	}),
  props: {
    msg: String
    },
    created:function(){
        var oauth = URLP("oauth")
        var code = URLP("code")
        if(oauth == "wechat"){
            UseCodeToToken(code)
            .then((resp)=>{
                var res = resp.data
                if (res.code == 1){
                    this.$cookies.set("authtoken", res.data)
                    this.$store.commit('setProgress',false)
                    // this.$router.push("/user/center")
                    return
                }
                this.$store.commit('setAlert',{icon:'close',text:res.msg,show:true})
            })
            .catch((err)=>{
                this.$store.commit('setAlert',{icon:'close',text:err,show:true})
            })
        }
    },
	methods: {
		bindCode: function (event){
            this.authcode = true
            if(this.sendAuthCode){
                OauthBindCode(this.phone,this.itac,this.$cookies.get("authtoken"))
                .then((resp)=>{
                    var res = resp.data;
                    this.$store.commit('setAlert',{icon:'close',text:res.msg,show:true})
                    this.authcode = false
                    if(res.code == 1){
                        this.sendAuthCode = false;
                        this.auth_time = 60;
                        var auth_timetimer =  setInterval(()=>{
                            this.auth_time--;
                            if(this.auth_time<=0){
                                this.sendAuthCode = true;
                                clearInterval(auth_timetimer);
                            }
                        }, 1000);
                    }
                })
                .catch((res)=>{
                    this.authcode = false
                    this.$store.commit('setAlert',{icon:'close',text:res,show:true})
                })
            }
            
        },
        bindPhone: function (event){
            if(!this.code==''){
                OauthBindPhone(this.phone,this.code,this.itac,this.$cookies.get("authtoken"))
                .then((resp)=>{
                    var res = resp.data;
                    if (res.code == 1){ // 绑定成功 更新 authtken {data}
                        this.$store.state.authtoken = res.authtoken;
                        this.$cookies.set("authtoken",res.data) // set cookies
                        this.$router.push({path:'/user/center'})
                    }
                    this.$store.commit('setAlert',{icon:'close',text:res.msg,show:true})
                })
                .catch((err)=>{
                        this.$store.commit('setAlert',{icon:'close',text:err,show:true})
                })
            }else{
                this.$store.commit('setAlert',{icon:'close',text:"请输入验证码",show:true})
            }
            
        }
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.loginbtn {
	min-width: 88px;
}
.link {
	color:#1a73e8;
}
</style>
